<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="bg-container" :style="{ backgroundImage: 'url(' + getImagePath(data.currentImg) + ')' }">
    </div>
    <div class="top-menu">
        <div class="logo-container">
        </div>
        <div class="name">
            教学信息管理系统
        </div>
    </div>
    <div style="height: 75%; display: flex;justify-content: flex-end;align-items: center;">
        <div class="pane" v-if="data.pageType == 1">
            <div class="pane-menu">
                <div class="login">
                    账号/邮箱登录
                </div>
                <div class="register" id="unselected" @click="changeSelected()">
                    邮箱注册
                </div>
            </div>
            <form>
                <v-text-field label="账号/邮箱" prepend-inner-icon="mdi-email-outline" class="input" v-model="data.account"
                    variant="outlined"></v-text-field>
                <div style="height: 28px;"></div>
                <v-text-field v-model="data.password" prepend-inner-icon="mdi-lock-outline" variant="outlined"
                    :type="data.show ? 'text' : 'password'" label="密码" class="input" @click:append="data.show = !data.show">
                    <template v-slot:append-inner>
                        <v-icon :icon="data.show ? 'mdi-eye' : 'mdi-eye-off'" size="24" style="cursor: pointer;"
                            @click="data.show = !data.show"></v-icon>
                    </template>
                </v-text-field>
                <div
                    style="height: 50px;margin-left:5%;margin-right:5%;margin-top:5%;display: flex;align-items: center;justify-content: space-between;">
                    <v-checkbox-btn v-model="data.rememberPassword" label="记住密码" density="comfortable"
                        color="blue"></v-checkbox-btn>
                    <a href="/forgot-password" style="color: blue; font-size: 12px;">忘记密码？</a>
                </div>
                <v-btn @click="onLogin()" class="button" v-loading="data.isLogin">
                    登录
                </v-btn>
            </form>
            <div style="font-size: 13px;margin-left: 5%;margin-right:5%;margin-top: 5%;">
                温馨提示:建议使用chrome26.0,microsoftedge10.0,firefox16.0及以上版本打开
            </div>
        </div>
        <div class="pane" v-if="data.pageType == 2">
            <div class="pane-menu">
                <div class="login" id="unselected" @click="changeSelected()">
                    账号/邮箱登录
                </div>
                <div class="register">
                    邮箱注册
                </div>
            </div>
            <form>
                <v-text-field label="邮箱" prepend-inner-icon="mdi-email-outline" class="input"
                    v-model="data.register_account" :rules="[data.rules.required, data.rules.verifyEmail]" dense
                    variant="outlined"></v-text-field>
                <div style="margin-top: 28px;">
                    <v-text-field v-model="data.register_password" prepend-inner-icon="mdi-lock-outline" variant="outlined"
                        :type="data.show ? 'text' : 'password'" label="密码"
                        :rules="[data.rules.required, data.rules.verifyPassword]" class="input"
                        @click:append="data.show = !data.show" dense>
                        <template v-slot:append-inner>
                            <v-icon :icon="data.show ? 'mdi-eye' : 'mdi-eye-off'" size="24" style="cursor: pointer;"
                                @click="data.show = !data.show"></v-icon>
                        </template>
                    </v-text-field>
                </div>
                <div style="display: flex;height: 70px;margin-top: 28px;">
                    <v-text-field clearable v-model="data.code" label="验证码" variant="outlined"
                        style="margin-left: 5%;margin-right: 4%;width: 50%;" maxlength="6" dense>
                    </v-text-field>
                    <v-btn @click="onShow" v-if="data.time == 0" color="blue-lighten-1"
                        style="width: 25%;height: 40px;border-radius: 5px;margin-right: 5%;margin-top: 2%;font-size: small;">
                        发送验证码
                    </v-btn>
                    <Vcode :show="data.isShow" @success="onSuccess" @close="onClose" v-if="data.time == 0" />
                    <v-btn
                        style="width: 25%;height: 40px;border-radius: 5px;margin-right: 5%;margin-top: 2%;font-size: small;"
                        :disabled="true" v-else>{{ data.time
                        }}s</v-btn>
                </div>
                <div style="margin-left: 4%;margin-right: 4%;">
                    <v-radio-group inline color="blue" v-model="role" height="10px">
                        <v-radio density="compact" value="2" label="学生"></v-radio>
                        <div style="width: 10px;"></div>
                        <v-radio density="compact" value="1" label="教师"></v-radio>
                    </v-radio-group>
                </div>
                <v-btn @click="onRegister()" class="button" v-loading="data.isRegister">
                    注册
                </v-btn>
            </form>
        </div>
    </div>
    <div class="member">
        组员：卜轩，陈浩楠，蒋晓宇，宋昊宸，张逸凡
    </div>
    <div class="member">
        Copyright© 2023 山东大学软件学院 All Rights Reserved
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue"
import router from "@/router"
import { Login, Register, SendMailVerificationCode } from "@/controllers/authController"
import { useUserStore } from "@/stores"
import { getUser, setPassword, getRememberPas, setRememberPas } from '@/utils/userUtil'
import { verifyEmail, verifyPassword } from "@/utils/verification"
import Vcode from "vue3-puzzle-vcode"
import { message } from "@/utils/message"

let role = ref('1')
let data = reactive({
    account: "",
    password: "",
    register_account: "",
    register_password: "",
    code: "",
    time: 0,
    images: [
        "landscape.jpg",
        "light.jpg",
        "mountain.jpg",
        "autumn.png",
    ],
    currentImg: Math.floor(Math.random() * 4),
    pageType: 1,
    rememberPassword: false,
    autoLogin: false,
    isLogin: false,
    isRegister: false,
    show: false,
    isShow: false,
    rules: {
        required: (value: any) => !!value || '此项必填',
        verifyEmail: (value: any) => verifyEmail(value) || '邮箱格式不正确',
        verifyPassword: (value: any) => verifyPassword(value) || '密码应为至少六位数字字母或下划线组成！'
    }
})
onMounted(() => {
    data.rememberPassword = getRememberPas()
    const user = getUser()
    data.account = user.account
    if (data.rememberPassword) {
        data.password = user.password
    }
})
async function onLogin() {
    if (data.account == "") {
        message('账号不能为空!')
        return
    }
    if (data.password == "") {
        message('密码不能为空!')
        return
    }
    try {
        data.isLogin = true
        await Login(data.account, data.password)
        setRememberPas(data.rememberPassword)
        if (data.rememberPassword) {
            setPassword(data.password)
        }
        useUserStore().login()
        data.isLogin = false
        router.push("/");
        message('登陆成功', 'success')
    } catch (error: any) {
        data.isLogin = false
        message(error.message, 'error')
    }
}
async function onRegister() {
    if (!verifyEmail(data.register_account)) {
        message("邮箱格式不正确")
        return
    }
    if (!verifyPassword(data.register_password)) {
        message("密码格式不正确")
        return
    }
    if (data.code == "") {
        message("请输入验证码！")
        return
    }
    try {
        data.isRegister = true
        await Register(data.register_account, data.register_password, data.code, role.value);
        message("注册成功！", 'success')
        data.pageType = 1
        data.account = data.register_account
        data.password = data.register_password
        data.register_account = ""
        data.register_password = ""
    } catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        data.isRegister = false
    }
}
function countdown() {
    if (data.time > 0) {
        data.time--
        setTimeout(countdown, 1000)
    }
}
function getImagePath(index: number) {
    const path = data.images[index];
    return path;
}
function changeSelected() {
    if (data.pageType == 1) {
        data.pageType = 2
    }
    else if (data.pageType == 2) {
        data.pageType = 1
    }
}
function onShow() {
    if (!verifyEmail(data.register_account)) {
        message("邮箱格式不正确")
        return
    }
    if (!verifyPassword(data.register_password)) {
        message("密码格式不正确")
        return
    }
    data.isShow = true
}
async function onSuccess() {
    try {
        data.isShow = false
        await SendMailVerificationCode(data.register_account, false)
        message("验证码发送成功", 'success')
        data.time = 60
        countdown()
    } catch (error: any) {
        message(error.message)
    }
}
function onClose() {
    data.isShow = false
}
</script>

<style scoped>
.bg-container {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
}

.top-menu {
    display: flex;
    align-items: center;
    z-index: 1;
}

.logo-container {
    width: 240px;
    height: 120px;
    background-image: url("logo-pc.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 14vh;
}

.name {
    height: 80px;
    border-left: 1px solid white;
    margin-top: 5vh;
    padding-left: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    user-select: none;
}

.member {
    margin-left: 14vh;
    color: white;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.pane {
    width: 23%;
    height: 80%;
    margin-right: 10%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    border: 1 solid black;
}

.input {
    height: 50px;
    width: 90%;
    font-size: 15px;
    margin-left: 5%;
    margin-right: 5%;
}

.pane-menu {
    height: 50px;
    margin-bottom: 30px;
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: flex;
}

.login {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0.5px solid rgb(211, 211, 211);
    border-top-left-radius: 10px;
    user-select: none;
}

.register {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 10px;
    user-select: none;
}

.button {
    width: 90%;
    height: 40px;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 5px;
    background-color: rgba(135, 206, 250, 0.5);
}

#unselected {
    background-color: rgba(255, 255, 255, 0.4);
    border-bottom: 0.5px solid rgb(211, 211, 211);
    cursor: pointer;
}
</style>@/controllers/authController